<template>

  <body>
    <tt></tt>
    <div id="one">
      <p style="color:yellow;font-size:50px">{{course.name}}</p>
      <img src="../../assets/images/ll.jpg"
           style="height:150px;border-radius: 50%">

    </div>
    <div id="two">
      <div class="two1">
        <b>共{{chapters.length}}章 &nbsp | &nbsp &nbsp</b>
        <a href="">
          <img src="../../assets/images/liu.png"
               style="height:25px;padding-top:10px">
        </a>

        &nbsp
        <b>{{course.visitednum}}</b>
        &nbsp &nbsp
        <a href="">
          <img src="../../assets/images/zan.png"
               style="height:25px;padding-top:10px">
        </a>
        &nbsp
        <b>{{course.praisednum}}</b>

        <img src="../../assets/images/yuan.png"
             style="float:right;height:28px;padding:5px">

        <img src="../../assets/images/xing.png"
             style="float:right;height:28px;padding:5px">
      </div>
      <div style="height:10%">
        <strong style="color:red;font-size:50px;">￥{{course.price}}</strong>
        <img src="../../assets/images/che.png"
             style="float:right;height:50px;padding:5px">
        <el-button type="warning"
                   style="float:right;padding-left:20px;margin:15px;">
          <a href="http://localhost:8081/buyNow">立即购买</a>

        </el-button>
        <el-button type="success"
                   style="float:right;margin-top:15px">免费试学</el-button>

      </div>
      <div style="height:9%">
        <b>开课时间：{{$moment(course.start).format('YYYY-MM-DD')}}——{{$moment(course.end).format('YYYY-MM-DD')}}</b>
        <b style="float:right;padding-right:30px">学科类型：设计学</b>
        <br>
        <b>选课时间：{{$moment(course.cstart).format('YYYY-MM-DD')}}——{{$moment(course.cend).format('YYYY-MM-DD')}}</b>
      </div>
      <div class="two1"></div>
      <div style="height：60%;">
        <div style="float: right;width:50%;height:100%">
          <img src="../../assets/images/u703.png"
               style="padding-top:30px">
        </div>
        <div style="float: right;width:50%;height:100%">
          <h1 style="padding-top:30px;padding-left:30px">课程介绍</h1>
          <div style="padding-10px;width:80%;margin:0 auto;">
            <p style="font-size:23px">
              {{course.description}}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div id="three">
      <p style="padding-top:30px;font-size:30px">授课老师</p>
      <img src="../../assets/images/ll.jpg"
           style="height:120px;border-radius: 50%"><br>
      <p style="font-size:30px">{{teacher.realname}}</p>
      {{school.name}} &nbsp &nbsp {{teacher.posi}}
      <hr style="width:90%">
      <p style="font-size:20px;text-align:left;padding-left:30px;padding-right:30px;line-height:30px;">
        {{teacher.intro}}</p>
    </div>
    <div id="four">
      <h1>章节目录</h1>
      <el-collapse accordion
                   v-for="(g,aaa) in chapters"
                   v-bind:key="aaa">
        <el-collapse-item>
          <template slot="title">
            <b style="font-size:50px;color:grey">{{g.id}}</b>
            &nbsp &nbsp &nbsp
            &nbsp &nbsp &nbsp
            &nbsp &nbsp &nbsp
            <b style="font-size:25px">{{g.chaptername}}</b>

          </template>
          <ul v-for="(s,bbb) in g.sections"
              v-bind:key="bbb"
              style="font-size:20px;padding-left:30px;text-align:left;list-style-type:none">
            <li>{{s.sectname}}</li>
          </ul>
        </el-collapse-item>
      </el-collapse>
      <br>

      <hr>
      <br>
      <!-- 学习目标 -->
      <p style="font-size:28px">学习目标</p>
      <p style="font-size:20px;text-align:left;padding-left:30px;padding-right:30px;line-height:30px;">
        {{course.goal}}
      </p>
      <!-- 考核标准 -->
      <br>
      <p style="font-size:28px">考核标准</p>
      <p style="font-size:20px;padding-left:30px;text-align:left">总分为{{assessment.total}}分</p>
      <p style="font-size:20px;padding-left:30px;text-align:left">[课件浏览]：{{assessment.ppt}}%</p>
      <p style="font-size:20px;padding-left:30px;text-align:left">[章节练习]：{{assessment.section}}%</p>
      <p style="font-size:20px;padding-left:30px;text-align:left">[期末在线测试]：{{assessment.finaltest}}%</p>
      <p style="font-size:20px;padding-left:30px;text-align:left">[课内讨论（讨论区讨论）]：{{assessment.discussion}}%</p>
      <br>

      <p style="font-size:28px">参考教材</p>

      <ul v-for="(r,ccc) in references"
          v-bind:key="ccc"
          style="font-size:20px;padding-left:30px;text-align:left;list-style-type:none">
        <li>{{r.name}}</li>
      </ul>

    </div>
    <div id="five">
      <p style="padding-top:20px;padding-left:20px;font-size:25px">评价</p>
      <hr>
      <img src="../../assets/images/u750.png"
           style="width:200px">
    </div>

    <ww></ww>
  </body>
</template>

<script>
import tt from "./tt.vue"
import ww from "./ww.vue"
export default {
  data () {
    return {
      course: [],
      chapters: [],
      sections: [],
      teacher: [],
      references: [],
      assessment: [],
      school: [],
      activeNames: ['1']
    }
  },
  methods: {
    handleChange (val) {
      console.log(val);
    }
  },

  created () {
    //   查询要展示的课程
    this.axios.get(this.baseUrl + "course/findcoursebyid?id=5001")
      .then(res => {
        console.log(res.data.data);
        this.course = res.data.data;
      })



    // 通过当前课程id查询参考书目
    {
      this.axios.get(this.baseUrl + "course/findreferencesbycourseid", this.course)
        .then(res => {
          this.references = res.data.data;
        })
    }




  },
  watch: {
    course: {  //深度监听course对象
      handler (val, oldVal) {
        // 通过当前课程查询教师
        this.findTeacher();
        this.findChapter();
        this.findAssessment();
      }
    },
    teacher: {
      handler (val, oldVal) {
        this.findSchool();
      }
    }
  },
  components: {
    tt: tt,
    ww: ww,
  },
  methods: {
    findTeacher () {    //通过课程查询老师
      this.axios.post(this.baseUrl + "course/findteacherbycourse", this.course)
        .then(res => {
          this.teacher = res.data.data;
        })
    },
    findChapter ()       // 通过当前课程的查询章节
    {
      this.axios.post(this.baseUrl + "course/findchaptersbycourse", this.course)
        .then(res => {
          this.chapters = res.data.data;
        })
    },
    findAssessment ()// 通过当前课程id查询考核标准
    {
      this.axios.post(this.baseUrl + "course/findassessmentbyid", this.course)
        .then(res => {
          this.assessment = res.data.data;
        })
    },
    findSchool ()// 通过当前教师id查询学校
    {
      this.axios.post(this.baseUrl + "teacher/findschoolbyteacherid", this.teacher)
        .then(res => {
          this.school = res.data.data;
        })
    }
  }

}
</script>



<style scoped>
body {
  /* background: url(../assets/images/32.jpg); */
  background-size: 100% 100%;
}
a {
  text-decoration: none;
}
#one {
  background-color: wheat;
  height: 350px;
  margin: 0 auto;
  background: url(../../assets/images/u685.jpg);
  background-size: 100% 100%;
  text-align: center;
  padding-top: 5px;
}

#two {
  background-color: white;
  height: 700px;
  width: 80%;
  margin: 0 auto;
}
.two1 {
  /* border: 1px solid red; */
  height: 6%;
}

#three {
  background-color: yellow;
  height: 480px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 25px;
}
#four {
  /* background-color: cyan; */
  /* height: auto; */
  height: auto;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.zd {
  font-size: 20px;
}

#five {
  /* background-color: coral; */
  /* height: auto; */
  height: 400px;
  width: 80%;
  margin: 0 auto;
}
.wei {
  color: aliceblue;
  font-size: 22px;
  margin: 50px;
}
.wei1 {
  color: white;
  font-size: 18px;
  margin-left: 160px;
}
</style>

